<template>
  <div ref="wrapRef" id="map-wrap" :style="{ height, width }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import locationIcon from '../../../assets/images/location.png';
import locationIconBlue from '../../../assets/images/location_blue.png';
import { useRouter } from 'vue-router';
import BaiduMap from './bmap';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  name: 'BaiduMap',
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
  },
  setup() {
    const router = useRouter();

    const wrapRef = ref<HTMLDivElement | null>(null);

    function getProjects() {
      return defHttp.get({ url: '/Dashbord/get-project' });
    }

    onMounted(() => {
      Promise.all([getProjects(), BaiduMap.init()]).then(([res, BMap]) => {
        const list = res.data.filter((item) => item.lon && item.lat);
        if (!list.length) {
          return;
        }
        const map = new BMap.Map(wrapRef.value);
        map.setMinZoom(10);
        map.setMaxZoom(15);
        map.centerAndZoom(new BMap.Point(list[0].lon, list[0].lat), 12);
        map.enableScrollWheelZoom(true);

        list.forEach((item) => {
          let point = new BMap.Point(item.lon, item.lat);
          let marker = setBlueIcon(point);
          console.log(item.name, point);
          blueIconOnClick(marker, item);
        });

        function blueIconOnClick(marker, item) {
          marker.addEventListener('click', (e) => {
            setRedIcon(marker);
            let infoWindow = getInfoWindow(item);
            map.openInfoWindow(infoWindow, map.getCenter(marker.point));
          });
        }

        function setBlueIcon(point) {
          const BMap = (window as any).BMap;
          let blueIcon = new BMap.Icon(locationIconBlue, new BMap.Size(28, 28));
          let marker = new BMap.Marker(point, { icon: blueIcon }); // 创建标注
          map.addOverlay(marker);
          return marker;
        }

        function setRedIcon(marker) {
          console.log('red...');
          const BMap = (window as any).BMap;
          let redIcon = new BMap.Icon(locationIcon, new BMap.Size(28, 28), {
            imageOffset: new BMap.Size(-1, -1),
          });
          map.removeOverlay(marker);
          marker = new BMap.Marker(marker.point, { icon: redIcon });
          map.addOverlay(marker);
        }

        function getInfoWindow(proj) {
          let title = `<div class="popTitle" style="background:transparent !important;">${proj.name}</div>`;
          let html = <any>[];
          html.push('<div>');
          html.push(
            `<div class="infoItems" style="background:transparent !important;"><span>地址：</span><span>${proj.address}</span></div>`,
          );
          html.push(
            `<div class="infoItems mt-4 flex justify-between">
          <button class="ant-btn ant-btn-primary" type="button" id='info-btn1'><span>设备集成</span></button>
          <button class="ant-btn ant-btn-primary" type="button" id='info-btn2'><span>项目详情</span></button>
          </div>`,
          );
          html.push('</div>');

          let opts = {
            width: 220, // 信息窗口宽度
            title: '<h4>' + title + '</h4>', // 信息窗口标题
            enableMessage: true, //设置允许信息窗发送短息
          };

          const BMap = (window as any).BMap;

          let info = new BMap.InfoWindow(html.join(''), opts);
          info.addEventListener('open', function (e) {
            document.getElementById('info-btn1').addEventListener('click', (e) => {
              router.push({
                path: '/project/topology/' + proj.id,
              });
            });
            document.getElementById('info-btn2').addEventListener('click', (e) => {
              router.push({
                path: '/project/details/' + proj.id,
              });
            });
          });
          return info;
        }
      });
    });

    return { wrapRef };
  },
});
</script>
